<script setup>
  name: 'MenuTree'
defineProps({
  menuData: Array,
  btnMent:Function
})

</script>

<template>
  <div>
    <template v-for="menu in menuData">
            <!-- 有子级 -->
            <el-sub-menu
              v-if="menu.children && menu.children.length > 0"
              :index="menu.path"
              :key="menu.id"
            >
              <template #title>
                <el-icon><component :is="menu.icon"></component> </el-icon>
                <span>{{ menu.name }}</span>
              </template>
              <el-menu-item-group>
              <!-- 如果有三级菜单可以递归 -->
             <MenuTree :menuData="menu.children" :btnMent="btnMent"></MenuTree>
             </el-menu-item-group>
             
            </el-sub-menu>

            <!-- :class="menu.active =='1' ? 'is-active' : ''"  -->
            <el-menu-item
              v-else
              :index="menu.path"
              :key="menu.id"
              @click="btnMent(menu)"
            >
              <!-- 使用icon动态加载-->
              <el-icon> <component :is="menu.icon"></component> </el-icon>
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </template>

        </div>
</template>

